<!-- 首页 -->
<template>
	<view>
		<view class="home-wrap">
			<!-- #ifdef APP-PLUS -->
			<u-no-network @retry="init"></u-no-network>
			<!-- #endif -->
		</view>
		<sh-search></sh-search>


		<view class="hot-goods u-m-b-10 u-p-x-16">
			<view class="u-waterfall" style="display: flex;">
				<view id="u-left-column" class="u-column">
					<view class="goods-item u-m-b-16 u-flex u-row-center u-col-center"
						v-for="(leftGoods,index) in leftList" :key="index">
						<ljshop-goods-card-pdd :detail="leftGoods" :type="leftGoods.activity_type"
							:image="leftGoods.thumbnail" :title="leftGoods.name" :subtitle="leftGoods.caption"
							:price="leftGoods.discountPrice.toFixed(2)" :originPrice="leftGoods.group_price"
							:sales="leftGoods.sales_num" :couponprice="leftGoods.coupon_price.toFixed(2)"
							:market_price="leftGoods.market_price.toFixed(2)"
							:tagTextList="leftGoods.activity_discounts_tags" @click="pddLink(leftGoods.id)">
						</ljshop-goods-card-pdd>
					</view>
				</view>
				<view id="u-right-column" class="u-column" style="margin-left: 20rpx;">
					<view class="goods-item  u-m-b-16 u-flex u-row-center u-col-center"
						v-for="(rightGoods,index) in rightList" :key="index">
						<ljshop-goods-card-pdd :detail="rightGoods" :type="rightGoods.activity_type"
							:image="rightGoods.thumbnail" :title="rightGoods.name" :subtitle="rightGoods.caption"
							:price="rightGoods.discountPrice.toFixed(2)" :originPrice="rightGoods.group_price"
							:sales="rightGoods.sales_num" :couponprice="rightGoods.coupon_price.toFixed(2)"
							:market_price="rightGoods.market_price.toFixed(2)"
							:tagTextList="rightGoods.activity_discounts_tags" @click="pddLink(rightGoods.id)">
						</ljshop-goods-card-pdd>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import shSearch from './components/sh-search.vue';
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {

			shSearch
		},
		data() {
			return {

				isRefresh: true,
				isConnected: true, //是否有网
				oneRowNum: 5,
				isScorll: false,
				categoryId: 0,
				navigations_list: [],
				fixed: false,
				height: 'auto',
				elClass: this.$u.guid(),
				left: 0,
				width: 'auto',
				stickyTop: 0,
				isSticky: false, //是否吸顶
				// 瀑布流 350-330
				addTime: 0, //排序间隙时间
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				tempList: [],
				tabCur: 0,
				scrollLeft: 0,
				isEmpty: true,
				childcategoryId: 0,
				goodsList: [],
				tabCurrent: 0,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 0,
				lastPage: 0,
				childlist: [],
				childlistitem: [],
				rebate: 0,
				guidePluginId: "",
				keywords:"",
			    searchVal:""
				

			};
		},
		computed: {
			...mapGetters(['isLogin']),
			// 头部模块数据

		},
		onPullDownRefresh() {
			 
		},
		onPageScroll(e) {
			this.isScorll = e.scrollTop > 100 ? true : false;
		},
		onShow() {
		 
		},
		onHide() {
			this.enable = false;
		},
		onLoad() {

			if (this.$Route.query.hasOwnProperty('keywords')) {

				this.keywords = this.$Route.query.keywords;
				this.searchVal = this.$Route.query.keywords;
				this.getGoodsList();
			} else {
				this.getGoodsList();
			}
		},
		methods: {
		 
			async splitData() {

				if (!this.tempList.length) return;
				let item = this.tempList[0];
				if (!item) return;

				// 分左右
				if (this.leftHeight < this.rightHeight) {
					this.leftHeight += 330;

					this.leftList.push(item);
				} else if (this.leftHeight > this.rightHeight) {
					this.rightHeight += 330;

					this.rightList.push(item);
				} else {
					this.leftHeight += 330;

					this.leftList.push(item);
				}

				// 移除临时列表的第一项，如果临时数组还有数据，继续循环
				this.tempList.splice(0, 1);
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}

			},
		 
			// 商品列表
			getGoodsList() {
				let that = this;

				that.$http('goods.searchproducts', {
					guidePluginId: uni.getStorageSync("guidePluginId"),
					page: that.currentPage,
					keyword:that.keywords
				}).then(res => {
					 
					if (res.code == 1) {
						this.isRefresh = false;
						that.goodsList = res.list;
						that.tempList = res.list;
						//that.rebate = res.rebate;
						that.goodsList.length && that.splitData();
					}
				});
			},
		 
			pddLink(id) {
				// #ifdef APP-PLUS

				this.appnav(id);
				// #endif
				// #ifdef MP-WEIXIN
				this.weiXin(id);
				// #endif
			},
			appnav(id) {
				let that = this
				that.$http('order.pddgetUrl', {
					UId: uni.getStorageSync("UId"),
					guidePluginId: uni.getStorageSync("guidePluginId"),
					goodId: id
				}).then(res => {
					 
					if (res.code == 1) {
						let platform = uni.getSystemInfoSync().platform

						let URL = res.message;
						console.info(platform)
						if (platform == "android") {
							console.info(11111)
							plus.runtime.openURL("pinduoduo://" + URL.replace("https://", ""), function(res) {
								 
							}, 'com.xunmeng.pinduoduo');
						} else {
							plus.runtime.launchApplication({
								action: "pinduoduo://com.xunmeng.pinduoduo/" + URL.replace(
									/https:\/\/.*\//, "")
							}, function(ret) {
								 
							});
						}
					}
				});
			},
			weiXin(id) {
				let that = this
				that.$http('order.pddgetminiUrl', {
					UId: uni.getStorageSync("UId"),
					guidePluginId: uni.getStorageSync("guidePluginId"),
					goodId: id
				}).then(res => {
					let pagePath = res.message.goodsPromotionUrlGenerateResponse.goodsPromotionUrlList[0].weAppInfo
						.pagePath
					uni.navigateToMiniProgram({
						appId: 'wx32540bd863b27570',
						path: pagePath,
						extraData: {
							'data1': 'test'
						},
						success(res) {
							// 打开成功
						}
					})

				});


			}
		}
	};
</script>


<style lang="scss" scoped>
	// 产品分类
	.menu-category-box,
	.menu-swiper-box {
		position: relative;
		background: #fff;

		.menu-swiper-item {
			background: #fff;
			height: 100%;
			width: 100%;
		}

		.menu-tab-box {
			.tab-list {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				margin: 20rpx 0;

				.tab-img {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
					border-radius: 50%;
				}

				.tab-text {
					font-size: 30rpx;
					color: #333333;
				}
			}
		}

		.menu-category-dots {
			display: flex;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 10rpx;

			.category-dot {
				width: 12rpx;
				height: 12rpx;
				background: #eeeeee;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.category-dot-active {
				width: 12rpx;
				height: 12rpx;
				background: #e9b461;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}
	}

	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	.category-tabs-wrap {
		min-height: 1000rpx;

		// 吸顶
		.u-sticky-wrap {
			background-color: #fff;
		}

		// 瀑布流
		.u-waterfall {
			@include vue-flex;
			flex-direction: row;
			align-items: flex-start;
		}

		.u-column {
			@include vue-flex;
			flex: 1;
			flex-direction: column;
			height: auto;
		}
	}

	// 滑动分类
	.tabs-content {
		white-space: nowrap;

		.tab-item {
			display: inline-block;
			margin: 0 10rpx;
			padding: 0 20rpx;

			.tab-title {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
			}

			.title-active {
				color: #a8700d;
			}

			.tab-des {
				font-size: 22rpx;
				font-weight: 400;
				color: #999999;
				text-align: center;
			}

			.des-active {
				background: linear-gradient(90deg, #e9b461, #eecc89);
				border-radius: 15rpx;
				padding: 2rpx 10rpx;
				color: #ffffff;
			}
		}
	}

	.ljshop-float-btn {
		position: fixed;
		bottom: calc(var(--window-bottom) + 100rpx);
		right: 30rpx;
		z-index: 9999;
		background: #333333;
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;

		.btn-item {
			margin-bottom: 20rpx;
			background: "#ff0000";

			.btn-img {
				margin-top: 20rpx;
				width: 80rpx;
				height: 80rpx;
			}

			.btn-name {
				font-size: 26rpx;
				color: #fff;
				text-align: center;
				white-space: nowrap;
			}
		}

	}

	.img-box {
		position: relative;
		width: 610rpx;

		.modal-img {
			width: 100%;
			will-change: transform;
			height: 830rpx;
		}
	}
</style>
